<template>
    <div class="infoLayout">
        <template v-if="props.data">
            <title-item :title="props.data.title" 
                        :view="props.data.stat.view" 
                        :ctime="props.data.ctime" 
                        :danmaku="props.data.stat.danmaku"
                        >
            </title-item>
            <video-box 
                :avid="props.data.aid"
                :bvid="props.data.bvid"
                :cid="props.data.cid"
                class="video">

            </video-box>
            <footer-item 
                :stat="props.data.stat"
                :desc="props.data.desc"
                :Tags="props.Tags"
                :adInfo="adList"
            >
            </footer-item>
        </template>
    </div> 
</template>
<script lang="ts" setup>
import { titleItem,footerItem,myComment } from '../components'
import videoBox  from './videoBox.vue'
import { get } from '@/http/axios'
import { watch,ref, Ref } from 'vue'
import { TagItem } from '../typeInterface'

interface Props{
    data:{
        mission_id:number
        aid:number
        bvid:string
        cid:number
        title:string,
        ctime:number    //投稿时间戳
        duration:number  //视频时长
        copyright:number  //应该是是否允许转载
        desc:string     //视频简介   可以为null  不展示
        stat:{
            coin:number   //投币
            share:number  //转发
            favorite:number //收藏
            like:number     //喜欢 点赞
            danmaku:number  //弹幕数量
            view:number     //向上取整 看过数量
        }
        honor_reply:{  //看过数量前的荣誉标题
            honor:[{  
                aid:number
                desc:string
                typr:number
                weekly_recommend_num:number
            }]
        },
    }
    Tags:Array<TagItem>
}
interface ad{
    act_url:string
    dic:string          //加粗上信息
    name:string         //加出下信息
    cover:string        //背景图片
    h5_cover:string
}

const props = defineProps<Props>()
const adList:Ref<ad | undefined> = ref()


//广告
function getAd(){
    get('/x/activity/subject/info?sid='+props.data.mission_id+'&bvid='+props.data.bvid,'','/bili')
    .then(res => {
        console.log('视频下方广告信息',res);
        adList.value = res.data
    }).catch(res => {
        alert('视频下方广告信息加载失败')
    })
}

watch(() =>props.data, () => {
    getAd()
})

</script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1600px){
    .infoLayout{
        width: 100%;
    }
    .video{
        height: 500px;
}
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .infoLayout{
        width: 100%;
    }
    .video{
        height: 650px;
    }
}
p{
    padding: 0;
    margin: 0;
}
.infoLayout{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
}
.video{
    width: 100%;
    background-color: black;
    color: white;
    font-size: 40px;
}
.afterBox{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 64%;
    height: 60px;
    & img{
        height: 100%;
    }
    & div:nth-child(2){
        scale: 0.8;
        margin-left: -60px;
        display: flex;
        flex-direction: column;
        align-items: start;
        font-size: 13px;
    }

}
</style>